<template>
    <div class="BroughtGold">
       
        <!-- 头部 -->
        <div class="header">
            <div class="header_box">
                <span class="header_reture"> <img src="../../../assets/img/public/reture.png" alt=""> </span>
                <div>整点领红包</div>
                <span class="header_rule">
                    <span @click="popup_rules">规则</span>
                </span>
                <div class="right_icon"><img src="../../../assets/img/BroughtGold/leiji.png" alt=""></div>
            </div>
            
            
        </div>
        <!--  -->
        <div class="content">
           <div class="content_all">
                <!-- 奖池 -->
                <div class="jackpot">
                    <span class="jackpot_left">
                        <span>今日已得<span>24</span>个</span>
                        <span>(1/2)</span>
                    </span>
                    <span class="today"><span>今日奖池</span></span>
                    <span class="jackpot_right" @click="toRedEnvelope">
                        <span><img src="../../../assets/img/BroughtGold/hong1.png" alt=""></span>
                        <span>
                            <span>累计已抢</span>
                            <span class="jackpot_right_money">￥0</span>
                        </span>
                    </span>
                </div>
                <!-- 价格 -->
                <div class="price">2000元</div>
                <!--  -->
                <div class="content_box">
                    <!-- 标题 -->
                    <span class="box_tit"><img src="../../../assets/img/BroughtGold/icon.png" alt=""> <span>红包主会场</span></span>
                    <!-- 场次提示 -->
                    <span class="eventsSuggest">今日大额红包场次：<span class="session">10点、12点、15点、20点</span></span>
                    <!-- 轮播 -->
                    <div class="banner">
                        <div class="banner_box">
                            
                                <div class="banner_left">
                                    
                                    <div class="time">
                                      <div>
                                          <p>00:00</p>
                                          <p>来晚了</p>
                                      </div>
                                    </div>
                                  
                                    <div class="banner_l">
                                      <img src="../../../assets/img/BroughtGold/hong2.png" alt="">
                                      <!-- <img src="../../../assets/img/BroughtGold/positive.png" alt=""> -->
                                    </div>
                            </div>
                            
                            <div class="banner_right">
                                <div class="time">
                                    <div>
                                        <p>00:00</p>
                                        <p>进行中</p>
                                    </div>
                                </div>
                                <div class="banner_r">
                                    <img src="../../../assets/img/BroughtGold/hong2.png" alt="">
                                    <!-- <img src="../../../assets/img/BroughtGold/positive.png" alt=""> -->
                                </div>
                            </div>
                        </div>
                        <div class="banner_midele">
                            <div class="time_m">
                                <div>
                                    <p>00:00</p>
                                    <p>未开始</p>
                                </div>
                            </div>
                            <div class="banner_m" @click="popup_play">
                                <div v-if="aa" class="positive">
                                    <p>ssss</p>
                                    <img src="../../../assets/img/BroughtGold/hong2.png" alt="">
                                    <!-- <img src="../../../assets/img/BroughtGold/positive.png" alt=""> -->
                                </div>
                               
                                <div v-else class="reverse">
                                    <p class="reverse_text">本场获得</p>
                                    <p class="reverse_price">0.02<span>元</span></p>
                                    <div class="view" @click="toDetails">查看</div>
                                     <!-- <img src="../../../assets/img/BroughtGold/reverse.png" alt=""> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 补领提示 -->
                    <span class="replacementTips">错过红包不用慌，每天有<span>3</span>次机会补领哦~</span>
                    <!-- 补领红包 -->
                    <div class="replacement">
                        <div class="replacement_text">
                            <p>当日补领红包次数: 个</p>
                            <span class="replacement_btn">
                                <span @click="popup_replacement">红包领取</span>
                            </span>
                        </div>
                        <!-- <div class="replacement_text">今日补领机会已用完 整点记得回来抢红包</div> -->
                    </div>
                    <!-- 滚动图 -->
                    <div class="Scroll">
                        <div class="Scroll_text">
                            <h5>抢的多，赚的多</h5>
                            <p>抢的红包越多，越容易中大奖</p>
                        </div>
                        <div class="Scroll_row">
                            <div class="rowup ">
                                <p class="row_p" v-for="i in list1" :key="i.index" :class="{anim:animate==true}">
                                    <span>恭喜用户</span>
                                    <span>{{i.name}}</span><span>获取红包</span>
                                    <span class="money">{{i.money}}</span><span>元</span>
                                </p>
                               
                            </div>
                           
                        </div>
                    </div>
                </div>
           </div>
        </div>
        <!-- 规则弹出层 -->
        <div class="Pop-up_rules" v-if="getrules">
           <div class="up_gold_box">
               <div>
                   <h5>规则说明</h5>
                    <p>asdsadsdsadasdsasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaasdsadsdsadasdsaa</p>
               </div>
                
                <div class="close"  @click="close">我知道了</div>
           </div>
        </div>
        <!-- 播放视频弹出层 -->
        <div class="Pop_up_play" v-if="getplay">
            <div class="up_gold_box">
                <div class="up_gold_playImg"><img src="../../../assets/img/BroughtGold/play_img.png" alt=""></div>
                <div class="close"  @click="closePlay"><img src="../../../assets/img/public/close.png" alt=""></div>
            </div>
            
        </div>
        <!-- 补领红包弹出层 -->
        <div class="Pop_up_supplement" v-if="replacement">
            <div class="up_supplement_box">
                <div class="up_supplement_playImg"><img src="../../../assets/img/BroughtGold/play_img.png" alt=""></div>
                <div class="close" @click="closeReplacement"><img src="../../../assets/img/public/close.png" alt=""></div>
            </div>
        </div>
        <!-- 领取成功 -->
        <div class="getSuccess" v-if="getsuccess">
            <div class="up_success_box">
                <div class="up_success_playImg">
                    <p>恭喜您获得</p>
                    <p>0.03<span>元</span></p>
                </div>
                <div class="close"  @click="closeSuccess"><img src="../../../assets/img/public/close.png" alt=""></div>
            </div>
        </div>
        <!-- 挽留页面弹出层 -->
        <div class="exit" v-if="geteExit">
            <div class="exit_box"><img src="../../../assets/img/BroughtGold/gold_exit.png" alt=""></div>
            <div class="close"  @click="closeExit"><img src="../../../assets/img/public/close.png" alt=""></div>
        </div>
        
    </div>
</template>

<script>
    export default {
        data(){
            return{
                list1:[
                    {name:11,money:0.01},
                    {name:22,money:0.01},
                    {name:33,money:0.01},
                    {name:44,money:0.01},
                    {name:55,money:0.01},
                    {name:66,money:0.01},
                ],
                // getGold:false,   //金币弹出层判断
                getrules:false,  //规则弹出层判断
                getplay:false,   //视频弹出层判断
                getsuccess:false,
                geteExit:false,
                replacement:false,
                rowTime:0,
                animate:false,
                aa:true
            }
        },
        created() {
            // console.log(this.$router)
        },
        mounted(){
            this.rowTime = setInterval(()=>{
                this.animate=true;
                setTimeout(()=>{     
                    this.list1.push(this.list1[0]);  // 将数组的第一个元素添加到数组的
                    this.list1.push(this.list1[1]);
                    this.list1.push(this.list1[2]);
                    this.list1.splice(0,3);     //删除数组的第一个元素
                    this.animate=false;     
                },500)
             },2000)
        },
        methods: {
            // 跳转到累计已抢
            toRedEnvelope(){
                this.$router.push({name:"RedEnvelope"})
            },
            toDetails(){
                this.$router.push({name:"Details"})
            },
            // 打开规则
            popup_rules(){
                this.getrules = !this.getrules;
            },
            // 关闭规则
            close(){
                this.getrules = !this.getrules;
            },
            // 打开视频红包弹出层
            popup_play(){
                // this.aa = !this.aa
                this.getplay = !this.getplay;
            },
            // 关闭视频红包弹出层
            closePlay(){
                this.getplay = !this.getplay;
            },
            // 打开补领红包弹出层
            popup_replacement(){
                this.replacement = !this.replacement
            },
            // 关闭补领红包弹出层
            closeReplacement(){
                this.replacement = !this.replacement
            },
            closeSuccess(){
                this.getsuccess = false;
            },
            closeExit(){
                this.geteExit = false;
            }
            
            
        },
        beforeDestroy(){
            clearInterval(this.rowTime)
        }
    }
</script>

<style lang="scss" scoped>
@import "../../../assets/css/activity/BroughtGold/BroughtGold.scss";
</style>